import React, { useEffect, useState } from 'react'
import './city.scss'
import { LeftOutline, EnvironmentOutline } from 'antd-mobile-icons'
import { Input } from 'antd-mobile'
import { IndexBar, List } from 'antd-mobile'
import { getCityList } from '../../request'
function City() {
    //定义当前城市数据
    // const [currentcity, setCurrentCity] = useState('')
    // useEffect(() => {
    //     getCityName('1eee6cb2df24056880c41e1762097824').then(res => {
    //         console.log(999, res)
    //         setCurrentCity(res.data.city)
    //     })
    // }, [])
    const [citylist, setCityList] = useState([])
    useEffect(() => {
        getCityList().then(res => {
            console.log(222, res)
            setCityList(res.data.data)
        })
    }, [])
    const [val, setValue] = useState('')
    return (
        <div className='city-box'>
            {/* 顶部搜索框 */}
            <div className='city-search'>
                <LeftOutline className='top-icon' />
                <Input onChange={val => { setValue(val) }} className='city-input' placeholder='输入城市名称' clearable />
            </div>
            <div className='current-city'>
                <EnvironmentOutline className='current-icon' />当前城市：<span>北京</span>
            </div>
            <div className='news'>
                最近访问
            </div>
            <div className='news-list'>
                <span>武汉</span>
                <span>上海</span>
            </div>
            <div className='hot'>
                热门城市
            </div>
            <div className='hotcity-list'>
                <span>南京</span>
                <span>石家庄</span>
                <span>太原</span>
                <span>沈阳</span>
                <span>合肥</span>
            </div>
            <div className='city-list'>
                <IndexBar>
                    {citylist && citylist.map(group => {
                        const { title, citys } = group
                        return (
                            <IndexBar.Panel
                                index={title}
                                title={`${title}`}
                                key={`${title}`}
                            >
                                <List>
                                    {citys && citys.map((item, index) => (
                                        <List.Item key={index}>{item.name}</List.Item>
                                    ))}
                                </List>
                            </IndexBar.Panel>
                        )
                    })}
                </IndexBar>
            </div>
        </div>
    )
}
export default City
